<template>
    <div class="stpes_top" v-if="!bottomShow && step">
        <div class="stpes_top_title">完成{{ total }}题后，可查看答案</div>
        <div class="stpes_top_title">{{ step + '/' + total }}</div>
        <div class="per" :style="{ width: ((step - 1) / total) * 100 + '%' }"></div>
    </div>
    <div class="contents" v-if="!bottomShow && step">
        <div class="title">
            [ 主观题 ] - [ {{ list[step - 1]?.type }} ]
        </div>
        <div class="label">
            {{ step }}.{{ list[step - 1]?.name }}
        </div>
        <!-- 单选 多选 判断 -->
        <div class="value"
            v-if="list[step - 1]?.type == '单选' || list[step - 1]?.type == '多选' || list[step - 1]?.type == '判断'">
            <div class="div_view" v-for="(item, index) in list[step - 1]?.answer" :key="index"
                @click="() => { radioClick(optionList[index], list[step - 1]?.max, list[step - 1]?.type) }"
                :style="{ backgroundColor: conputedColor(optionList[index]) }">
                <div class="value_option">
                    {{ optionList[index] }}
                </div>
                <div class="titles">
                    {{ item }}
                </div>
            </div>
        </div>
        <!-- 简答 -->
        <div class="value" v-if="list[step - 1]?.type == '简答'">
            <el-input style="width: 240px" autosize type="textarea" @input="inputChange" placeholder="请输入答案" />
        </div>

        <div class="buttons" @click="submit">
            下一题
        </div>
    </div>
    <div class="step1" v-if="bottomShow">
        <div class="step1_per">
            {{ number }}%
        </div>
        <div class="step1_lv">
            正确率
        </div>
        <div class="step1_line">
            <div class="step1_line_active" :style="{ width: number + '%' }">

            </div>
        </div>
        <div class="step1_div">
            <div class="step1_div_items" v-for="(item, index) in itemsList" :key="index">
                <div class="value">{{ item.value }}</div>
                <div class="label">{{ item.label }}</div>
            </div>
        </div>
        <div class="step1_title">
            优秀的人总能看到比自己更好的，而平庸的人总能看到比自己更差的
        </div>
        <div class="buttons_div">
            <div class="step1_button" @click="gotos">
                我要纠错
            </div>
            <!-- <view class="step1_buttons">
					查看答案解析
				</view> -->
            <div class="step1_buttons" @click="goHome">
                完成
            </div>
        </div>
    </div>
    <el-dialog v-model="activeShow" title="纠错原因" width="450px" append-to-body center :before-close="cancel">
        <el-form ref="dictFormRef" :model="model1" :rules="rules" label-width="80px">
            <el-form-item label="错题标题" prop="questionId">
                <el-select v-model="model1.questionId" placeholder="请选择错题标题" clearable filterable>
                    <el-option v-for="dict in typeColumns" :key="dict.id" :label="dict.name" :value="dict.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="错误原因" prop="reason">
                <el-input v-model="model1.reason" autosize type="textarea" placeholder="请输入错误原因"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm(dictFormRef)">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { practiceList, finishPractice,djjError } from '@/api/index'
const list = ref<any>([])
const optionList = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])
const step = ref(1)
const total = ref(0)
const answerList = ref([])
const bottomShow = ref(false)
const number = ref(0)
const itemsList = ref([
    { label: '错误题数', value: 54 },
    { label: '正确题数', value: 21 },
    { label: '累计做题', value: 100 },
])
const activeShow = ref(false)
const typeColumns = ref([])
const model1 = ref({
    questionId: '',
    reason: '',
    name: ''
})
const dictFormRef = ref()
const showType = ref(false)
const rules = {
    questionId: [
        { required: true, message: '请选择错题标题', trigger: 'change' }
    ],
    reason: [
        { required: true, message: '请输入错误原因', trigger: 'change' }
    ]
}

watch(() => model1.value.questionId, (val) => {
    if (val) {
        model1.value.name = typeColumns.value.filter(item=>item.id === val)[0].name
    }
})

// 获取所有练习题目
const getpracticeList = async () => {
    const res = await practiceList()
    res.rows.forEach((item) => {
        item.value = item.id
        if (item.type == '单选' || item.type == '多选') {
            item.answer = [item.optionA, item.optionB, item.optionC, item.optionD]
            if (item.type == '单选') {
                item.max = 1
            }
            if (item.type == '多选') {
                item.max = 4
            }
        } else if (item.type == '判断') {
            item.answer = ['正确', '错误']
            item.max = 1
        }
    })
    typeColumns.value = res.rows
    list.value = res.rows
    answerList.value = new Array(res.total).fill([])
    total.value = res.total
}
// 单选事件
const radioClick = (item: any, max: any, type: any) => {
    // 再次点击取消
    if (answerList.value[step.value - 1].includes(item)) {
        const list = JSON.parse(JSON.stringify(answerList.value[step.value - 1]))
        const indexs = list.indexOf(item)
        list.splice(indexs, 1)
        answerList.value.splice(step.value - 1, 1, list)
    } else {
        // 选择的最大阈值
        if (answerList.value[step.value - 1].length < max) {
            const list = JSON.parse(JSON.stringify(answerList.value[step.value - 1]))
            list.push(item)
            answerList.value.splice(step.value - 1, 1, list)
        }
    }
}
const conputedColor = (item) => {
    return answerList.value[step.value - 1].includes(item) ? 'rgb(233,241,244)' : ''
}
// 下一题
const submit = async () => {
    // 不是最后一题的时候
    if (step.value != total.value) {
        // 有选项的时候
        if (answerList.value[step.value - 1].length > 0) {
            step.value = step.value + 1
        } else {
            proxy?.$modal.msgWarning('请选择答案')
        }
    } else {
        const lists = []
        answerList.value.forEach((item, index) => {
            lists.push({
                codeId: list.value[index].codeId,
                questionId: list.value[index].id,
                userAnswer: list.value[index].type == '判断' ? (item.join(',') == 'A' ? '正确' : '错误') : list.value[index].type == '简答' ? item : item.join(',')
            })
        })
        const res = await finishPractice(lists)
        itemsList.value[0].value = res.data.incorrectNum
        itemsList.value[1].value = res.data.correctNum
        itemsList.value[2].value = res.data.questionNum
        number.value = Math.floor(res.data.correctNum / res.data.questionNum * 100)
        bottomShow.value = true
    }
}
// 输入框事件
const inputChange = (e) => {
    answerList.value.splice(step.value - 1, 1, e)
}
// 纠错
const gotos = () => {
    activeShow.value = true
}
/** 表单重置 */
const reset = () => {
    model1.value = {
        questionId: '',
        reason: '',
        name: ''
    }
}
const cancel = () => {
    reset();
    activeShow.value = false;
}
const submitForm = async (formEl: any) => {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            try {
                await djjError({ ...model1.value })
                ElMessage({
                    message: '操作成功',
                    type: 'success',
                    duration: 3000,
                })
                cancel()
            } catch {
            }
        } else {
            console.log('error submit!', fields);
        }
    });
}
const emits = defineEmits(['doClose']);
// 返回首页
const goHome = () => {
    emits('doClose');
}
onMounted(() => {
    getpracticeList()
})
</script>
<style scoped lang="scss">
.stpes_top {
    width: 100%;
    height: 70px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    font-weight: 500;
    box-sizing: border-box;
    padding: 0 40px;
    position: relative;

    .stpes_top_title {
        position: relative;
        z-index: 2;
    }

    .per {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        height: 100%;
        background-color: rgb(159, 219, 255);
    }
}

.contents {
    box-sizing: border-box;
    padding: 0 40px;

    .title {
        color: #03a9f4;
        margin-top: 30px;
        font-size: 30px;
    }

    .label {
        font-weight: 500;
        font-size: 36px;
        margin-top: 30px;
    }



    .value {
        display: flex;
        width: 100%;
        align-items: center;
        font-size: 36px;
        box-sizing: border-box;
        flex-wrap: wrap;

        .value_option {
            margin-right: 40px;
            border: 1px solid;
            width: 34px;
            height: 34px;
            font-size: 32px;
            text-align: center;
            line-height: 34px;
            background-color: #fff;
            border-radius: 50%;
            margin-left: 40px;
        }

        .div_view {
            width: 100%;
            display: flex;
            align-items: center;
            height: 60px;
            margin-top: 40px;
            cursor: pointer;
        }
    }
}

.step1 {
    padding-top: 30px;
    box-sizing: border-box;
    text-align: center;

    .image {
        width: 190px;
        height: 190px;
    }

    .title {
        margin-top: 20px;
    }



    .people {
        width: 300px;
        margin-top: 20px;
        color: rgb(179, 173, 173);
        font-size: 30px;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .step1_contents {
        position: relative;
        width: 300px;
        /* 六边形的宽度 */
        height: 180px;
        /* 六边形的高度 */
        margin: 50px auto;
        text-align: center;
        line-height: 180px;
        font-size: 180px;
        font-weight: 800;
        color: rgb(227, 227, 227);

        .tops {
            width: 0;
            height: 0;
            border-left: 150px solid transparent;
            border-right: 150px solid transparent;
            border-bottom: 75px solid;
            position: absolute;
            top: -75px;
        }

        .bottom {
            width: 0;
            height: 0;
            border-left: 150px solid transparent;
            border-right: 150px solid transparent;
            border-top: 75px solid;
            position: absolute;
            top: 180px;
        }

    }

    .step1_per {
        margin-top: 60px;
        font-size: 50px;
        text-align: center;
    }

    .step1_lv {
        font-size: 22px;
        margin-top: 10px;
        color: rgb(179, 173, 173);
        text-align: center;
    }

    .step1_line {
        width: 70%;
        height: 6px;
        margin-top: 10px;
        border-radius: 3px;
        background-color: rgb(179, 173, 173);
        margin-left: 15%;
        position: relative;

        .step1_line_active {
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgb(84, 192, 228);
            height: 6px;
        }
    }

    .step1_div {
        width: 70%;
        margin-top: 50px;
        margin-left: 15%;
        background-color: rgb(240, 240, 240);
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 24px;
        line-height: 2;
        color: rgb(151, 151, 151);

        .step1_div_items {}
    }

    .step1_title {
        margin-top: 120px;
        text-align: center;
        width: 400px;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .buttons_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 80px;

        .step1_buttons {
            width: 220px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            color: #fff;
            background-color: rgb(34, 175, 229);
            font-size: 28px;
            border-radius: 6px;
            margin-left: 20px;
        }

        .step1_button {
            width: 220px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            color: #fff;
            background-color: #000;
            font-size: 28px;
            border-radius: 6px;
        }
    }

}


.buttons {
    margin: 100px auto 0;
    width: 400px;
    height: 80px;
    background-color: rgba(34, 175, 229);
    color: #fff;
    line-height: 80px;
    text-align: center;
    font-size: 36px;
    border-radius: 10px;
    letter-spacing: 20px;
    cursor: pointer;
}
</style>